<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素周期表</title>
    <style>
        div{ overflow: hidden; }
        table{ empty-cells: hide; border-spacing: 0; border-collapse: collapse; margin:0 auto; overflow: hidden; background: #000;}
        td{ width:58px; height:58px; border-radius: 5px; text-align: center; font-size:10px; }
        .gen{background: #81D183;}
        .zuhe{background: #D17D57;}
        .color1{background: #D1D157;}
        .color2{background: #6575D3;}
        .color3{background: #55D157;}
        .color4{background: #D1D1D3;}
        .color5{background: #D17DD3;}
        .mes{ width: 260px; height: 130px; position: absolute; background: #fff; border-radius: 5px; font-size:12px; padding:5px; box-shadow: 0 0 10px rgba(0,0,0,.8);}
    </style>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
   <div>
           <table>
        <tbody>
            <tr>
                <td class="gen con">html5</td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                <td class="zuhe con">col</td>
                <td class="zuhe con">table</td>
            </tr>
            <tr>
                <td class="color2 con">head</td>
                <td class="color1 con">span</td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                <td class="zuhe con">div</td>
                <td class="color3 con">fieldset</td>
                <td class="color3 con">form</td>
                <td class="color2 con">body</td>
                <td class="color2 con">h1</td>
                <td class="color2 con">section</td>
                <td class="zuhe con">colgrounp</td>
                <td class="zuhe con">tr</td>
            </tr>
            <tr>
                <td class="color2 con">title</td>
                <td class="color1 con">a</td>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                <td class="zuhe con">pre</td>
                <td class="color3 con">meter</td>
                <td class="color3 con">selete</td>
                <td class="color2 con">aside</td>
                <td class="color2 con">h2</td>
                <td class="color2 con">header</td>
                <td class="zuhe con">caption</td>
                <td class="zuhe con">td</td>
            </tr>
            <tr>
                <td class="color2 con">meta</td>
                <td class="color1 con">rt</td>
                <td class="color1 con">dfn</td>
                <td class="color1 con">em</td>
                <td class="color1 con">i</td>
                <td class="color1 con">small</td>
                <td class="color1 con">ins</td>
                <td class="color1 con">s</td>
                <td class="zuhe con">br</td>
                <td class="zuhe con">p</td>
                <td class="zuhe con">blockquote</td>
                <td class="color3 con">legend</td>
                <td class="color3 con">optgroup</td>
                <td class="color2 con">address</td>
                <td class="color2 con">h3</td>
                <td class="color2 con">nav</td>
                <td class="color4 con">menu</td>
                <td class="zuhe con">th</td>
            </tr>
            <tr>
                <td class="color2 con">base</td>
                <td class="color1 con">rp</td>
                <td class="color1 con">browsers</td>
                <td class="color1 con">abbr</td>
                <td class="color1 con">time</td>
                <td class="color1 con">b</td>
                <td class="color1 con">strong</td>
                <td class="color1 con">del</td>
                <td class="zuhe con">kbd</td>
                <td class="zuhe con">hr</td>
                <td class="zuhe con">ol</td>
                <td class="color3 con">dl</td>
                <td class="color3 con">label</td>
                <td class="color3 con">option</td>
                <td class="color2 con">datalist</td>
                <td class="color2 con">h4</td>
                <td class="color4 con">article</td>
                <td class="zuhe con">command</td>
            </tr>
            <tr>
                <td class="color2 con">tbody</td>
                <td class="color2 con">link</td>
                <td class="color1 con">noscript</td>
                <td class="color1 con">q</td>
                <td class="color1 con">sub</td>
                <td class="color1 con">mark</td>
                <td class="color1 con">bdi</td>
                <td class="color1 con">wbr</td>
                <td class="zuhe con">figcaption</td>
                <td class="zuhe con">ul</td>
                <td class="zuhe con">dt</td>
                <td class="color3 con">input</td>
                <td class="color3 con">output</td>
                <td class="color3 con">keygen</td>
                <td class="color2 con">h5</td>
                <td class="color2 con">footer</td>
                <td class="color4 con">summary</td>
                <td class="zuhe con">thead</td>
            </tr>
            <tr>
                <td class="color2 con">style</td>
                <td class="color2 con">script</td>
                <td class="color1 con">cite</td>
                <td class="color1 con">samp</td>
                <td class="color1 con">sup</td>
                <td class="color1 con">ruby</td>
                <td class="color1 con">bdo</td>
                <td class="color1 con">code</td>
                <td class="zuhe con">figure</td>
                <td class="zuhe con">li</td>
                <td class="zuhe con">dd</td>
                <td class="color3 con">textarea</td>
                <td class="color3 con">button</td>
                <td class="color3 con">progress</td>
                <td class="color2 con">h6</td>
                <td class="color2 con">hgroup</td>
                <td class="color4 con">details</td>
                <td class="zuhe con">tfoot</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="color5 con">ins</td>
                <td class="color5 con">s</td>
                <td class="color5 con">br</td>
                <td class="color5 con">p</td>
                <td class="color5 con">blockquote</td>
                <td class="color5 con">legend</td>
                <td class="color5 con">optgroup</td>
                <td class="color5 con">address</td>
                <td class="color5 con">h3</td>
                <td class="color5 con">nav</td>
                <td class="color5 con">menu</td>
                <td class="color5 con">th</td>
            </tr>
        </tbody>
    </table>
   </div>

</body>
    <script>
        $.getJSON('mes.json',function(data){
                    //console.log(data);
                for(var i=0;i<$('.con').length;i++){
                    for(x in data[i]){
                        $('.con').eq(i).html(x);
                    }   
                }	
			})
        $('<div class="mes"></div>').appendTo($('tbody'));
        $('.con').click(function(){
            //console.log(1);
            $a = $(this);
            $('.con').css('box-shadow','0 0 0 rgba(0,0,0,.9)')
            $(this).css('box-shadow','0 0 10px rgba(0,0,0,.9)')
            $('tbody').remove('.mes');
            $.getJSON('mes.json',function(data){
				//console.log(data);
				$('.mes').html('<h3>'+$a.html()+'</h3><p>'+data[$a.index('.con')][$a.html()]+'</p>');
                console.log($a.offset().top);
                $('.mes').css('top',$a.offset().top+50);
                $('.mes').css('left',$a.offset().left);
			})
        })
        
    </script>
</html>